<template>
  <tl-ref-tree v-model="valueBridge" :queryDataUrl="url.queryData" :queryTreeUrl="url.queryTree" :initDisplayData.sync="initDisplayDataBridge" refTitle="选择上级区域" v-bind="inputProps" v-on="{ confirm }" treeQueryKey="qry_id" :externalQueryParam="{ qry_code: this.queryParam }"></tl-ref-tree>
</template>

<script>
export default {
  name: "TlRefAreaGroup",
  data() {
    return {
      url: {
        queryData: "/mms/provinceCityMatchinfo/list",
        queryTree: "/mms/deptProvinceCityMatchInfo/queryTreeListFromProvinceCityMatchInfo"
      },
      valueBridge: undefined,
      initDisplayDataBridge: ""
    }
  },
  props: {
    value: {
      default: "",
      type: [String, Number]
    },
    initDisplayData: {
      default: "",
      type: String
    },
    queryParam: {
      type: String,
      default: ""
    }
  },
  computed: {
    inputProps() {
      return this.$attrs
    }
  },
  methods: {
    confirm(datas) {
      this.$emit("confirm", datas)
    }
  },
  created() {
    this.valueBridge = this.value
    this.initDisplayDataBridge = this.initDisplayData
  },
  watch: {
    value(newVal, oldVal) {
      this.valueBridge = newVal
    },
    valueBridge(newVal, oldVal) {
      this.$emit("input", newVal)
    },
    initDisplayData(newVal, oldVal) {
      this.initDisplayDataBridge = newVal
    },
    initDisplayDataBridge(newVal, oldVal) {
      this.$emit("update:initDisplayData", newVal)
    }
  }
}
</script>

<style></style>
